<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback" ></MyNav>


		<view class="content" id="main"  @click="addAttendance()">

			<image class="contentImg" src="/static/clock/tianjia.png" mode="scaleToFill"></image>
			<text class="contentText">添加考勤人员</text>
		</view>
		
		
		<scroll-view scroll-y="true" class="contentListScroll" :style="'height:'+scrollViewHeight+'px'" >
		<view class="contentList">
			
			<view class="contentListItem" v-for="(item,index) in listData">
				<text class="contentListItemLeft">{{item.name}}</text>
				<text class="contentListItemRight">移除</text>
			</view>
		</view>
		
		
		</scroll-view>
		
	

	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'


	export default {
		components: {
			MyNav,
			bgImage,

		},
		data() {
			return {
				title: '考勤人员',
				isback: true,
				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
				
				listData:[
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈'
					},
					{
						name:'圆圈1'
					}
				]

			}
		},
		
		onReady() {
			// 获取距离顶部的距离
						let query = uni.createSelectorQuery().in(this);
						query.select('#main').boundingClientRect(data => {
							// console.log(data);
							this.mainTop = data.top
							
							// 在其他页面或组件中访问
							const app = getApp();
							this.scrollViewHeight=app.globalData.system.screenHeight-this.mainTop-app.globalData.totalHeight 
							
							
							/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
							console.log('滚动距离',this.scrollViewHeight); */
						}).exec();
		
		},
		
		methods: {
			
			// 添加考勤人员
			addAttendance(){
				uni.navigateTo({
					url: '/subPack/clockIn/addAttendancePersonnel/addAttendancePersonnel',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}

		}
	}
</script>

<style>
	.contentListItemRight{
		
		display: flex;
		
	
		align-items: center;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0081FF;
		line-height: 30rpx;
		
		border-radius: 16rpx;
		border: 2px solid #0081FF;
		padding: 10rpx 20rpx 10rpx 20rpx;
		margin-right: 30rpx;
	}
	.contentListItemLeft{
		display: flex;
		
		align-items: center;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;
		margin-left: 30rpx;
	}
	.contentListItem{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		width: 690rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-bottom: 30rpx;
	}
	.contentListScroll{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		height: 600rpx;
		
	}
	.contentList{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		
	}
	.contentText {
		display: flex;

		align-items: center;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 36rpx;
	}

	.contentImg {
		display: flex;
		width: 40rpx;
		height: 40rpx;
		margin-right: 30rpx;
	}

	.content {
		display: flex;
		justify-content: center;
		align-items: center;

		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		margin-top: 30rpx;

	}
</style>